<!-- components/modals/RepositoryModal.vue -->
<template>
    <a-modal v-model:visible="modalVisible" :title="isEditing ? '编辑仓库' : '新增仓库'" :confirm-loading="loading"
        @ok="handleSubmit" @cancel="handleCancel" ok-text="保存" cancel-text="取消" width="600px" class="repository-modal">
        <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
            <a-form-item label="Gitee 仓库地址" name="giteeUrl">
                <a-input v-model:value="formState.giteeUrl"
                    placeholder="请输入 Gitee 仓库地址，例如：https://gitee.com/username/repository" size="large">
                    <template #prefix>
                        <LinkOutlined />
                    </template>
                </a-input>
            </a-form-item>

            <a-form-item label="备注信息" name="remark">
                <a-textarea v-model:value="formState.remark" placeholder="请输入仓库备注信息（可选）" :rows="4" show-count
                    :maxlength="200" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
  
<script setup lang="ts">
import { LinkOutlined } from '@ant-design/icons-vue'
import type { Rule } from 'ant-design-vue/es/form'

interface RepositoryModalProps {
    visible: boolean
    isEditing: boolean
    editingData?: {
        id?: number
        giteeUrl: string
        remark?: string
    }
    loading?: boolean
}

interface RepositoryModalEmits {
    (e: 'update:visible', value: boolean): void
    (e: 'submit', data: { giteeUrl: string; remark?: string; id?: number }): void
    (e: 'cancel'): void
}

const props = withDefaults(defineProps<RepositoryModalProps>(), {
    visible: false,
    isEditing: false,
    loading: false
})

const emit = defineEmits<RepositoryModalEmits>()

// 表单引用
const formRef = ref()

// 表单状态
const formState = reactive({
    giteeUrl: props.editingData?.giteeUrl || '',
    remark: props.editingData?.remark || ''
})

// 表单验证规则
const rules: Record<string, Rule[]> = {
    giteeUrl: [
        { required: true, message: '请输入 Gitee 仓库地址', trigger: 'blur' },
        { type: 'url', message: '请输入有效的 URL 地址', trigger: 'blur' },
        { pattern: /gitee\.com/, message: '请输入 Gitee 仓库地址', trigger: 'blur' }
    ]
}

// 计算属性：同步 visible 状态
const modalVisible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
})

// 监听编辑数据变化，更新表单
watch(() => props.editingData, (newData) => {
    if (newData) {
        formState.giteeUrl = newData.giteeUrl || ''
        formState.remark = newData.remark || ''
    }
}, { immediate: true })

// 提交表单
const handleSubmit = async () => {
    try {
        await formRef.value.validate()

        const submitData = {
            giteeUrl: formState.giteeUrl,
            remark: formState.remark,
            id: props.isEditing ? props.editingData?.id : undefined
        }

        emit('submit', submitData)
    } catch (error) {
        console.error('表单验证失败:', error)
    }
}

// 取消操作
const handleCancel = () => {
    formRef.value.resetFields()
    emit('cancel')
}

// 暴露方法供父组件调用
defineExpose({
    resetForm: () => formRef.value?.resetFields()
})
</script>
  
<style scoped>
.repository-modal :deep(.ant-modal-content) {
    border-radius: 12px;
    overflow: hidden;
}

.repository-modal :deep(.ant-modal-header) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.repository-modal :deep(.ant-modal-title) {
    color: white;
}
</style>